<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog title="查看库类型" v-model="props.dataBaseVisible" @close="cancel()">
    <div class="back">
      <span>要素库库类型：</span>
      <span>{{ dataBaseInfo?.name }}</span>
    </div>
    <div class="basic_info">
      <div class="title">
        <div @click="fold1 = !fold1">
          <el-icon color="#8E8E8E" v-if="fold1"><CaretBottom /></el-icon>
          <el-icon color="#8E8E8E" v-if="!fold1"><CaretTop /></el-icon>
          <div>技术元数据</div>
        </div>
      </div>
      <div class="info" v-show="!fold1">
        <div class="item">
          <span>数据库模式：</span>
          <span>{{ dataBaseInfo?.databaseSchema }}</span>
        </div>
        <div class="item">
          <span>访问权限：</span>
          <span>{{ dataBaseInfo?.permissions }}</span>
        </div>
        <div class="item">
          <span>数据格式：</span>
          <span>{{ dataBaseInfo?.databaseFormat }}</span>
        </div>
        <div class="item">
          <span>存储位置：</span>
          <span>{{ dataBaseInfo?.storageLocation }}</span>
        </div>
      </div>
    </div>
    <div class="basic_info">
      <div class="title">
        <div @click="fold2 = !fold2">
          <el-icon color="#8E8E8E" v-if="fold2"><CaretBottom /></el-icon>
          <el-icon color="#8E8E8E" v-if="!fold2"><CaretTop /></el-icon>
          <div>业务元数据</div>
        </div>
      </div>
      <div class="info" v-show="!fold2">
        <div class="item">
          <span>业务定义：</span>
          <span>xxxxx</span>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="cancel"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="DataBaseView" setup>
import { getDataBaseDetail } from '@/api/metaData/index';
const props = defineProps(['dataBaseVisible', 'data']);
const emit = defineEmits(['handleEvent'])
const fold1 = ref(false);
const fold2 = ref(false);
//库信息
const dataBaseInfo = ref(null);
//查询库信息
const getBaseInfo = () => {
  console.log('props?.data')
  console.log(props?.data)
  getDataBaseDetail(props?.data?.id).then(res=>{
    if(res?.data){
      dataBaseInfo.value = res?.data;
    }
  })
};
//取消
const cancel = ()=>{
    emit('handleEvent');
}
onMounted(() => {
  getBaseInfo();
});
</script>
<style lang="scss" scoped>
.back {
  font-size: 12px;
  > span:nth-child(2) {
    color: #909399;
  }
  margin-bottom: 10px;
}
.basic_info {
  width: 100%;
  font-size: 12px;
  .title {
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    height: 30px;
    align-items: center;
    padding: 0 10px;
    > div:nth-child(1) {
      display: flex;
      cursor: pointer;
      > div:nth-child(3) {
        font-weight: 600;
      }
    }
  }
  .info {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    width: 100%;
    .item {
      margin-bottom: 10px;
      min-width: 33%;
      > span:nth-child(2) {
        color: #909399;
      }
    }
  }
}
</style>